<%--
  Created by IntelliJ IDEA.
  User: xh
  Date: 2020/2/7
  Time: 14:05
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息 - 技术栈 - Java程序员成长平台</title>
    <meta name="keywords" content="">
    <meta name="description" content>
    <link rel="stylesheet" href="${APP_PATH}/vendor/layui-v2.4.5/layui/css/layui.css">
    <link rel="stylesheet" href="${APP_PATH}/css/common.css">
    <link rel="stylesheet" href="${APP_PATH}/css/header.css">
    <link rel="stylesheet" href="${APP_PATH}/css/footer.css">
    <link rel="stylesheet" href="${APP_PATH}/css/user-info.css">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<jsp:include page="head.jsp"></jsp:include>

<div class="layui-main g-main">
    <div class="layui-row layui-tab">
        <div class="layui-tab-content layui-col-xs10">
            <div class="layui-tab-item layui-col-xs7 layui-show">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">基本资料</li>
                        <li>更多信息</li>
                    </ul>
                    <div class="l-line"></div>
                    <div class="layui-tab-content l-show-info">
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form" action="" id="form1">
                                <div class="l-head-photo">
                                    <div class="layui-upload l-show-photo">
                                        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3826081162,1314535516&fm=26&gp=0.jpg" id="head-photo" class="layui-upload-img" title="头像"/>
                                        <button class="layui-btn l-show-upload-word" id="show-upload-btn">上传头像</button>
                                        <input type="file" id="face" name="face">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-inline">
                                        <input type="hidden" value="${sessionScope.user.id}" name="id" id="id2">
                                        <input type="text" value="${sessionScope.user.username}" class="layui-input layui-disabled input" id="username2">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">手机</label>
                                        <div class="layui-input-inline">
                                            <input type="text" value="${sessionScope.user.tel}" name="phone" id="phone" placeholder="请输入手机号" lay-verify="required|phone" autocomplete="off" class="layui-input input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">邮箱</label>
                                        <div class="layui-input-inline">
                                            <input type="text"  value="${sessionScope.user.email}" name="email" id="email" placeholder="请输入邮箱地址" lay-verify="email" autocomplete="off" class="layui-input input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="gender" value="男" title="男">
                                        <input type="radio" name="gender" value="女" title="女">
                                        <input type="radio" name="gender" value="保密" title="保密" checked>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">个性签名</label>
                                    <div class="layui-input-inline">
                                        <textarea placeholder="暂未填写" value="${sessionScope.user.introduction}" name="introduction" id="introduction" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit="" lay-filter="demo1" onclick="updateUserInfo1();">修改</button>
                                        <button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="layui-tab-item">
                            <form class="layui-form" action="" id="form2">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">出生日期</label>
                                        <div class="layui-input-inline">
                                            <input type="text" value="${requestScope.userInfo.birth}" name="birth" id="birth" placeholder="请选择出生日期" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">毕业院校</label>
                                    <div class="layui-input-inline">
                                        <input type="text" value="${requestScope.userInfo.school}" name="school" id="school" placeholder="请输入毕业院校" autocomplete="off" class="layui-input input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">所学专业</label>
                                    <div class="layui-input-inline">
                                        <input type="text" value="${requestScope.userInfo.subject}" name="subject" id="subject" placeholder="请输入所学专业" autocomplete="off" class="layui-input input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">是否毕业</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="graduation" value="1" title="是">
                                        <input type="radio" name="graduation" value="0" title="否">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">所在城市</label>
                                    <div class="layui-input-inline">
                                        <select name="quiz1" id="sel1">
                                            <option value="">请选择省</option>
                                            <option value="浙江省" selected="">浙江省</option>
                                            <option value="江西省">江西省</option>
                                            <option value="福建省">福建省</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline">
                                        <select name="quiz2" id="sel2">
                                            <option value="">请选择市</option>
                                            <option value="杭州">杭州</option>
                                            <option value="宁波" disabled="">宁波</option>
                                            <option value="温州">温州</option>
                                            <option value="台州">台州</option>
                                            <option value="绍兴">绍兴</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit="" lay-filter="demo1" onclick="updateUserInfo2()">修改</button>
                                        <button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm2()">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item layui-col-xs8">
                <div class="layui-col-xs6 layui-col-xs-offset7 l-change-password">
                    <form action="" method="post">
                        <div class="item"><input type="password" placeholder="旧密码" class="layui-input" id="oldPassword"></div>
                        <div class="item"><input type="password" placeholder="密码" class="layui-input" id="newPassword"></div>
                        <div class="item"><input type="password" placeholder="确认密码" class="layui-input" id="comfirmPassword"></div>
                        <div class="item"><input class="layui-btn layui-btn-fluid btn" type="button" value="确认修改" onclick="updatePassword()"></div>
                    </form>
                </div>
            </div>
            <div class="layui-tab-item layui-col-xs8">
                <div class="change-phone layui-col-xs6 layui-col-xs-offset7" >
                    <p>验证码将发送到手机*********30</p>
                    <p class="tip">若长时间未收到验证码，请检查是否将运营商拉黑</p>
                    <div><input class="layui-input input" placeholder="请先输入收到的验证码"><button class="layui-btn layui-btn-primary">获取验证码</button></div>
                    <div><input class="layui-input new" placeholder="再输入新手机号"></div>
                    <div><button class="layui-btn layui-btn-fluid">提交</button></div>
                </div>
            </div>
            <div class="layui-tab-item layui-col-xs8">
                <div class="change-email layui-col-xs6 layui-col-xs-offset7">
                    <p>验证码将发送到16****邮箱</p>
                    <p class="tip">如果长时间未收到验证码，请检查垃圾箱</p>
                    <div><input class="layui-input input" placeholder="请先输入收到的验证码"><button class="layui-btn layui-btn-primary">获取验证码</button></div>
                    <div><input class="layui-input new" placeholder="再输入新邮箱地址"></div>
                    <div><button class="layui-btn layui-btn-fluid">提交</button></div>
                </div>
            </div>
            <div class="layui-tab-item layui-col-xs12">
                <span class="layui-icon layui-icon-speaker">：仅支持查询30天以内的登录日志。若发现异常登录，请尽快修改密码！</span>
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th>登录方式</th>
                        <th>IP地址</th>
                        <th>登录时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>电脑登录</td>
                        <td>127.0.0.1</td>
                        <td>2016-11-29</td>
                    </tr>
                    <tr>
                        <td>电脑登录</td>
                        <td>127.0.0.1</td>
                        <td>2016-11-28</td>
                    </tr>
                    <tr>
                        <td>电脑登录</td>
                        <td>127.0.0.1</td>
                        <td>2016-11-28</td>
                    </tr>
                    <tr>
                        <td>电脑登录</td>
                        <td>127.0.0.1</td>
                        <td>2016-11-28</td>
                    </tr>
                    <tr>
                        <td>电脑登录</td>
                        <td>127.0.0.1</td>
                        <td>2016-11-28</td>
                    </tr>
                    </tbody>
                </table>
                <div class="page"></div>
            </div>
            <div class="layui-tab-item layui-col-xs12">
                <blockquote class="layui-elem-quote">
                    当前系统排名：<span class="layui-badge-rim badge-number">第2名</span>，
                    总积分：<span class="layui-badge-rim badge-number">390分</span>，
                    和上一名相差：<span class="layui-badge-rim badge-number">39分</span>，继续加油！
                </blockquote>
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th>积分类型</th>
                        <th>积分原因</th>
                        <th>积分值</th>
                        <th>创建时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>积分增加</td>
                        <td>成功举报人</td>
                        <td>2</td>
                        <td>2016-11-29</td>
                    </tr>
                    <tr>
                        <td>积分增加</td>
                        <td>成功举报人</td>
                        <td>2</td>
                        <td>2016-11-29</td>
                    </tr>
                    <tr>
                        <td>积分增加</td>
                        <td>成功举报人</td>
                        <td>2</td>
                        <td>2016-11-29</td>
                    </tr>
                    <tr>
                        <td>积分增加</td>
                        <td>成功举报人</td>
                        <td>2</td>
                        <td>2016-11-29</td>
                    </tr>
                    </tbody>
                </table>
                <div class="page"></div>
            </div>
        </div>
        <ul class="layui-tab-title l-menu">
            <li class="layui-this">个人资料</li>
            <li>修改密码</li>
        </ul>
    </div>
</div>

<div class="g-footer layui-clear">
    <hr>
    <div>Copyright ©2018 技术栈(jishuzhan.club), All Rights Reserved.</div>
    <div>渝ICP备13001123号-2</div>
</div>

<script src="${APP_PATH}/vendor/holder.min.js"></script>
<script src="${APP_PATH}/vendor/layui-v2.4.5/layui/layui.js"></script>
<script src="${APP_PATH}/js/common.js"></script>
<script src="${APP_PATH}/js/user-info.js"></script>
<script>
    function updatePassword() {
        var id=$("#id2").val();
        var opassword=$("#oldPassword").val();
        var npassword=$("#newPassword").val();
        var cpassword=$("#comfirmPassword").val();

        if(cpassword != npassword){
            layer.msg("两次密码不一致！", {time: 3000, icon: 5, shift: 6}, null);
            return;
        }
        if(opassword == npassword){
            layer.msg("不能输入同样的密码", {time: 3000, icon: 5, shift: 6}, null);
            return;
        }

        var loadingIndex = null;

        //提交表单
        $.ajax({
            url : "${APP_PATH}/user/updatePassword",
            method : 'POST',
            data : {
               id:id,
                password:npassword

            },
            beforeSend : function(){
                loadingIndex = layer.msg('正在修改，请稍候~~', {icon: 16});
            },
            success : function ( result ){
                if( result.success ){
                    layer.msg("修改员工数据成功！", {time: 3000, icon: 6, shift: 4}, function(){
                        // 跳转页面
                        window.location.href="${APP_PATH}/user/toUser-home-for-me";
                    });
                } else {
                    layer.msg("修改数据失败了，请联系管理员！", {time: 3000, icon: 5, shift: 6}, null);
                }
            },
            complete : function(){
                layer.close(loadingIndex);
            }
        });

    }
    // layui.use('upload', function() {
    //     var $ = layui.jquery
    //         , upload = layui.upload;
    //
    //     //图片上传
    //     var uploadInst = upload.render({
    //         elem: '#show-upload-btn'
    //         , url: '/upload/'
    //         , before: function (obj) {
    //             obj.preview(function (index, file, result) {
    //                 alert(1);
    //                 $('#head-photo').attr('src', result); //图片链接（base64）
    //             });
    //         }
    //         , done: function (res) {
    //             //如果上传失败
    //             if (res.code > 0) {
    //                 return layer.msg('上传失败');
    //             }
    //             //上传成功
    //         }
    //         , error: function () {
    //             //演示失败状态，并实现重传
    //             var demoText = $('#demoText');
    //             demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
    //             demoText.find('.demo-reload').on('click', function () {
    //                 uploadInst.upload();
    //             });
    //         }
    //     });
    // });
    function resetForm(){
        // dom对象  jquery对象    reset 是 dom 对象的方法
        // jquery对象  --> dom对象
        $("#form1")[0].reset();
    }
    function resetForm2(){
        // dom对象  jquery对象    reset 是 dom 对象的方法
        // jquery对象  --> dom对象
        $("#form2")[0].reset();
    }

    function updateUserInfo1() {
        var id=$("#id2").val();
        var username=$("#username2").val();
        var tel=$("#phone").val();
        var email=$("#email").val();
        var sex=$('input:radio[name="gender"]:checked').val();
        var introduction=$("#introduction").val();

        if(username == ''){
            layer.msg("用户名不能为空！", {time: 3000, icon: 5, shift: 6}, null);
            return;
        }
        if(tel == ''){
            layer.msg("手机号不能为空！", {time: 3000, icon: 5, shift: 6}, null);
            return;
        }

        var reg = /^[a-z0-9A-Z]+[-|a-z0-9A-Z._]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-z]{2,}$/ig;
        if(!reg.test(email)){
            layer.msg("邮箱地址不正确！", {time: 3000, icon: 5, shift: 6}, null);
            return;
        }

        var loadingIndex = null;

        //提交表单
        $.ajax({
            url : "${APP_PATH}/user/doEdit",
            method : 'POST',
            data : {
                id : id,
                username : username,
                tel:tel,
                email : email,
                gender:sex,
                introduction:introduction
            },
            beforeSend : function(){
                loadingIndex = layer.msg('正在修改，请稍候~~', {icon: 16});
            },
            success : function ( result ){
                if( result.success ){
                    layer.msg("修改员工数据成功！", {time: 3000, icon: 6, shift: 4}, function(){
                        // 跳转页面
                        window.location.href="${APP_PATH}/user/toUser-home-for-me";
                    });
                } else {
                    layer.msg("修改数据失败了，请联系管理员！", {time: 3000, icon: 5, shift: 6}, null);
                }
            },
            complete : function(){
                layer.close(loadingIndex);
            }
        });


    }

    function updateUserInfo2() {
        var id=$("#id2").val();
        var birth=$("#birth").val();
        var school=$("#school").val();
        var subject=$("#subject").val();
        var graduation=$('input:radio[name="graduation"]:checked').val();
        var address=$("#sel1").val();
        var address2=$("#sel2").val();

        if(school == ''){
            layer.msg("用户名不能为空！", {time: 3000, icon: 5, shift: 6}, null);
            return;
        }
        if(subject == ''){
            layer.msg("手机号不能为空！", {time: 3000, icon: 5, shift: 6}, null);
            return;
        }



        var loadingIndex = null;

        //提交表单
        $.ajax({
            url : "${APP_PATH}/userInfo/doEdit",
            method : 'POST',
            data : {
                id : id,
                birth:birth,
                school:school,
                subject:subject,
                graduation:graduation,
                address:address,
                addresss2:address2

            },
            beforeSend : function(){
                loadingIndex = layer.msg('正在修改，请稍候~~', {icon: 16});
            },
            success : function ( result ){
                if( result.success ){
                    layer.msg("修改员工数据成功！", {time: 3000, icon: 6, shift: 4}, function(){
                        // 跳转页面
                        window.location.href="${APP_PATH}/user/toUser-home-for-me";
                    });
                } else {
                    layer.msg("修改数据失败了，请联系管理员！", {time: 3000, icon: 5, shift: 6}, null);
                }
            },
            complete : function(){
                layer.close(loadingIndex);
            }
        });


    }
</script>
</body>
</html>
